<template>
  <div>
    <el-form ref="detailForm" :model="detailForm" label-width="100px" :disabled="true">
      <el-form-item label="审批请求ID">
        <el-input v-model="detailForm.approvalRequestsId" />
      </el-form-item>
      <el-form-item label="请求信息">
        <el-input v-model="detailForm.requestInfo" type="textarea" />
      </el-form-item>
      <el-form-item label="请求日期">
        <el-input v-model="detailForm.requestDate" />
      </el-form-item>
      <el-form-item label="审批日期">
        <el-input v-model="detailForm.approvalDate" />
      </el-form-item>
      <el-form-item label="审批结果">
        <el-input  :value="getStatusText(detailForm.approvalResult)" />
      </el-form-item>
      <el-form-item label="拒绝原因">
        <el-input v-model="detailForm.rejectionReason" type="textarea" />
      </el-form-item>
      <el-form-item label="请求者姓名">
        <el-input v-model="detailForm.requesterName" />
      </el-form-item>
      <el-form-item label="审批者姓名">
        <el-input v-model="detailForm.approverName" />
      </el-form-item>
      <el-form-item label="地点">
        <el-input v-model="detailForm.location" />
      </el-form-item>
      <el-form-item label="车辆信息">
        <el-table :data="detailForm.sysVehicles" border style="width: 100%">
          <el-table-column label="车牌号" align="center" prop="licensePlate" />
          <el-table-column label="品牌" align="center" prop="brand" />
          <el-table-column label="购车年份" align="center" prop="purchaseYear" />
          <el-table-column label="单位名称" align="center" prop="organizationName" />
          <el-table-column label="车辆类型" align="center" prop="type" />
          <el-table-column label="座位数" align="center" prop="seatCount" />
          <el-table-column label="驾驶员" align="center" prop="driver" />
          <el-table-column label="图片" align="center" width="120">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.image"
                fit="cover"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="流程日志">
        <el-steps direction="vertical" :active="detailForm.sysProcessLogDto.length">
          <el-step v-for="(log, index) in detailForm.sysProcessLogDto" :key="index" :title="log.operationType" :description="log.remarks">
            <template slot="icon">
              <el-tag type="info">{{ index + 1 }}</el-tag>
            </template>
            <template slot="description">
              <div><strong>操作时间:</strong> {{ log.operationTime }}</div>
              <div><strong>操作结果:</strong> {{ log.operationDetails }}</div>
            </template>
          </el-step>
        </el-steps>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getDicts } from "@/api/system/dict/data";

export default {
  name: "ApprovalDetail",
  props: {
    open: {
      type: Boolean,
      default: false
    },
    delRequestsStatus: {
      type: Array,
      default: () => []
    },
    detailForm: {
      type: Object,
      default: () => ({
        sysProcessLogDto:[],
        sysVehicles: [],
        approvalRequestsId: null,
        requestInfo: null,
        requestDate: null,
        approvalDate: null,
        approvalResult: null,
        rejectionReason: null,
        requesterName: null,
        approverName: null,
        location: null
      })
    },
    delVehiclesStatus: {
      type: Array,
      default: () => []
    }
  },
  data() {
  },
  created() {
    // 设置调试信息
    this.getDicts();
  },
  methods: {
    getStatusText(status) {
      const statusItem = this.delRequestsStatus.find(item => item.dictSort === status);
      return statusItem ? statusItem.dictLabel : "未知状态";
    },
    /** 根据词典查找订单的状态 */
    getDicts() {
      getDicts('sys_shengqing_leixi').then(response => {
        this.delRequestsStatus = response.data;
        // 强制更新组件
        this.$forceUpdate();
      });
    },
  }
};
</script>
